import React, { useState } from 'react';
import './Header.css';

function Header({ addTodo }) {
  // 定义一个名为 input 的状态变量，初始值为空字符串
  const [input, setInput] = useState('');

  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && input.trim()) {
      addTodo(input.trim());
      setInput('');
    }
  };

  return (
    <div className="header">
      <h1>待办事项</h1>
      <input
        type="text"
        className="todo-input"
        placeholder="请输入任务名称，回车确认"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={handleKeyPress}
      />
    </div>
  );
}

export default Header;